<template>
  <div class='comment-child'>
    <div class="flex reply-area">
      <a class='web-site-avatar' target='_blank' :href='reply.webSite ? reply.webSite:"#"' style='opacity: 1'>
        <Avatar :url="reply.avatar" />
      </a>
      <div class=" flex flex-col rounded-md relative">
        <div class='user-info'>
          <div class='user-name'>{{ reply.nickname }}</div>
          <div class='user-badge' v-if='reply.badge'>{{ reply.badge }}</div>
          <time class='comment-time'>{{ time }}</time>
        </div>
        <div class="reply commentContent reply-content">
          <p v-html="commentContent.replaceAll('\n', '<br>')" />
          <span @click="clickOnSonReply" class="cursor-pointer reply-button flex">
            <el-icon><ChatLineRound /></el-icon>
          </span>
        </div>
      </div>
    </div>
    <a href="" target="_blank"></a>
    <CommentReplyForm
      class="mt-5"
      v-show="show"
      :replyUserId="reply.userId"
      :initialContent="replyContent"
      @changeShow="changeShow" />
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, toRefs } from 'vue'
import Avatar from '@/components/Avatar.vue'
import CommentReplyForm from './CommentReplyForm.vue'
import { ChatLineRound } from '@element-plus/icons-vue'

export default defineComponent({
  components: {
    ChatLineRound,
    Avatar,
    CommentReplyForm
  },
  props: ['reply', 'commentUserId'],
  setup(props) {
    const reactiveData = reactive({
      replyContent: '' as any,
      time: props.reply.createTime as any,
      show: false as any
    })
    const clickOnSonReply = () => {
      reactiveData.replyContent = '@' + props.reply.nickname
      reactiveData.show = true
    }
    const changeShow = () => {
      reactiveData.show = false
    }
    const commentContent = computed(() => {
      if (props.reply.replyUserId !== props.commentUserId) {
        return (`<a class="fn" href="#comment-${props.reply.parentId}">@${props.reply.replyNickname}</a>`+
          props.reply.commentContent
        )
      } else {
        return (`<a class="fn" href="#comment-${props.reply.parentId}">@${props.reply.replyNickname}</a>`+
          props.reply.commentContent
        )
      }
    })
    return {
      ...toRefs(reactiveData),
      commentContent,
      clickOnSonReply,
      changeShow
    }
  }
})
</script>
<style lang="scss" scoped>
.comment-child{
  margin: 0.8rem 0;
}
.reply {
  background: var(--s-bg,rgba(0,0,0,.025));
  box-shadow: var(--s-box-shadow);
  padding: 0.5em var(--gap-span);
  border-radius: var(--radius);
}
.reply-content{
  display: flex;
  flex-flow: wrap;
  align-items: center;
  width: fit-content;
}
.reply-button {
  color: var(--color-sub);
}
.commentContent {
  line-height: 26px;
  white-space: pre-line;
  word-wrap: break-word;
  word-break: break-all;
}
</style>
<style lang="scss">
.reply-link {
  color: var(--text-accent);
}
</style>
